<template>
	<view class="random_lots_box">
		<Tips/>
		<view class="header">
			<MyNull height="calc(20vh)" img="createRandomLots.png"/>
			<TipInfo color="#FFFFFF" id="13"></TipInfo>
		</view>
		<view class="content_random_lot">
			<view class="lots_title">
				<MyInput
					label="主题"
					v-model="fromData.title"
					:focus="false"
					fontSize="30rpx"
					placeholder="点我输入主题"/>				
			</view>
			<view class="lots_item" v-for="(id,index) in Object.keys(fromData.lots)" :key="id">
				<view class="left">
					<view @click="deleteLotsFun(id)">
						<MyIcons size="40rpx" :src="joinSystemPath('del_light.png')"/>
					</view>
					<MyInput
						v-model="fromData.lots[id].name"
						:focus="false"
						inputWidth="100%"
						fontSize="30rpx" 
						placeholder="输入该签的名字"
						:borderColor="primary_light_color" />					
				</view>
				<view class="right">
					<uni-number-box v-model="fromData.lots[id].num"/>
					<view class="extra">
						个签
					</view>
				</view>
			</view>
			<view class="lots_item">
				<view class="left" @click="addLotsFun" style="margin-left: 5rpx;">
					<MyIcons size="40rpx" :src="joinSystemPath('add_light.png')"/>
					<MyInput
						:focus="false"
						fontSize="30rpx"
						inputWidth="100%"
						v-model="add_tip"
						:disabled="true"
						:color="primary_light_color"
						/>					
				</view>
				<view class="right">
					<view></view>
					<view class="extra count_lots_nums">(共计{{lotsNums}}个签)</view>
				</view>
			</view>
			<view class="submit_box">
				<MyButton :clickFun="submit" :bgc="primary_light_color">发布</MyButton>
			</view>
			<AdBanner width="100%" diyStyle="margin: -6rpx 0rpx 0rpx 0;"/>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {computed, ref} from 'vue'
	
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import TipInfo from '@/components/TipInfo/TipInfo.vue'
	import MyInput from '@/components/MyInput/MyInput.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {
		joinSystemPath,
		joinAvatarPath
	} from '@/utils/imgJoinName.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		verifyIsShowChooseAd,
		verifyIsLogin
	} from '@/hooks/verify.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_hot_color,
		primary_light_color,
		primary_main_bgc,
		primary_shallow_color,
		shallow_text_color,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const dormitoryAllId=uni.getStorageSync('homeData')
	
	const lotsNums = computed(()=>{
		const keys = Object.keys(fromData.value.lots)
		return keys.reduce((pre,cur)=>{
			return pre+fromData.value.lots[cur].num
		},0)
	})
	
	const fromData = ref({
		title:'',
		lots:{
			0:{
				name:'',
				num:2
			},
			1:{
				name:'',
				num:1
			}
		}
	})
	
	const add_tip=ref('再添加一种签')
	
	//删除一种签
	const deleteLotsFun=(id)=>{
		const _lots = JSON.parse(JSON.stringify(fromData.value.lots))
		const keys = Object.keys(_lots)
		if(keys.length <= 2){
			uni.$emit('tips','最少保留两种签','warn')
			return
		}
		delete _lots[id]
		fromData.value.lots = _lots
	}
	
	//添加一种签
	const addLotsFun=()=>{
		const _lots = JSON.parse(JSON.stringify(fromData.value.lots))
		const keys = Object.keys(fromData.value.lots).map(item=>Number(item))
		if(keys.length===20){
			uni.$emit('tips','最多添加20种签','warn')
			return
		}
		//从大到小排序
		keys.sort((a,b)=>b-a)
		_lots[keys[0]+1] = {
			name:'',
			num:1
		}
		fromData.value.lots = _lots
	}
	
	//提交
	const submit=async()=>{
		verifyIsLogin()
		let {title,lots:_lots} = fromData.value
		_lots = JSON.parse(JSON.stringify(_lots))
		
		if(!title.trim()){
			uni.$emit('tips','标题不能为空','warn')
			return
		}
		
		verifyIsShowChooseAd(getCurrentPages(),'创建抽签')
		const keys = Object.keys(_lots).map(item=>Number(item)).sort((a,b)=>a-b)
		const lots = []
		
		for(let i=0;i<keys.length;i++){
			if(!_lots[keys[i]].name.trim()){
				uni.$emit('tips','请填写完所有签的名字','warn')
				return
			}
			if(!_lots[keys[i]].num){
				uni.$emit('tips','每一种签的个数不能为0','warn')
				return
			}
			lots.push(_lots[keys[i]])
		}
		
		const body = {
			title,
			lots
		}
		const {data,success} = await dormitoryModel.postAddRandomLots(body,dormitoryAllId.dormitory_id)
		if(success){
			uni.$emit('tips','创建成功，正在跳转','success')
			setTimeout(()=>{
				uni.redirectTo({
					url:`/pages/Dormitory/RandomJoinRecord/RandomJoinRecord?id=${data}&isNew=true`
				})
			},500)
		}
		console.log('数据',body)
	}
	
	const handleCopyData=async(id)=>{
		const {data,success} = await dormitoryModel.getRandomLotsInfo(null,id)
		
		if(success){
			const {data:lotData} = data
			fromData.value.title = data.title
			const tmpData={}
			lotData.forEach((item,index)=>{
				tmpData[index]={
					name:item.name,
					num:item.nums
				}
			})
			fromData.value.lots = tmpData
		}
	}
	
	onLoad((opt)=>{
		const {id} = opt
		if(id){
			handleCopyData(id)
		}
	})
	
</script>

<style lang="less">
	.random_lots_box{
		background-image: linear-gradient(to top, rgba(97,214,213,0),rgba(97,214,213,1));
		height: calc(100vh);
		.header{
			display: grid;
			grid-template-columns: 3fr 2fr;
			align-items: center;
		}
		.content_random_lot{
			min-height: calc(80vh);
			background-color: #FFFFFF;
			margin: 0 20rpx;
			border-radius:20rpx 20rpx 0 0;
			padding: 10rpx 0;
			padding-bottom: 80rpx;
			.submit_box{
				padding: 20rpx;
			}
			.lots_title{
				padding: 0 10rpx;
				padding-top: 10rpx;
				display: flex;
			}
			.lots_item{
				display: grid;
				grid-template-columns: 3fr 2fr;
				align-items: center;
				margin-top: 20rpx;
				.left{
					display: grid;
					grid-template-columns: 1fr 5fr;
					align-items: center;
					margin-right: 14rpx;
				}
				.right{
					font-size: 24rpx;
					align-items: center;
					display: grid;
					grid-template-columns: 3fr 1fr;
					color: v-bind(primary_light_color);
					.extra{
						text-align: left;
					}
					.count_lots_nums{
						margin-right: 24rpx;
						width: 300rpx;
						text-align: right;
						color: v-bind(primary_text_color);
					}
				}
			}
		}
	}
</style>
